<template>
  <SearchBox/>

  <div>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        v-for="(item, index) in list"
        :key="index"
        @tab-click="handleClick"
    >
      <el-tab-pane :label="item.recommend" :name="item.recommend">
        <!-- 展示推荐数据 -->
        <div v-for="(doctor, index) in tui" :key="'tui-' + index" class="doctor-card">
          <div class="doctor-content">
            <div class="doctor-header">
              <div class="doctor-image-container">
                <img :src="'http://localhost:8000/' + doctor.avatar" alt="" class="doctor-avatar" />
              </div>
              <div class="doctor-name-hospital">
                <h4>{{ doctor.name }} - {{ doctor.hospital }}</h4>
              </div>
            </div>
            <div class="doctor-info">
              <div class="info-sections">
                <div class="section-left">
                  <p>科室：{{ doctor.department }}</p>
                  <p>简介：{{ doctor.description }}</p>
                  <p>职称：{{ doctor.title }}</p>
                </div>
                <div class="section-middle">
                  <p>回答次数：{{ doctor.response_count }}</p>
                  <p>评分：{{ doctor.score }}</p>
                </div>
                <div class="section-right">
                  <p>价格：{{ doctor.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="item.doctor" :name="item.doctor">
        <!-- 展示医生数据 -->
        <div v-for="(doctor, index) in doctor" :key="'doctor-' + index" class="doctor-card">
          <div class="doctor-content">
            <div class="doctor-header">
              <div class="doctor-image-container">
                <img :src="'http://localhost:8000/' + doctor.avatar" alt="" class="doctor-avatar" />
              </div>
              <div class="doctor-name-hospital">
                <h4>{{ doctor.name }} - {{ doctor.hospital }}</h4>
              </div>
            </div>
            <div class="doctor-info">
              <div class="info-sections">
                <div class="section-left">
                  <p>科室：{{ doctor.department }}</p>
                  <p>简介：{{ doctor.description }}</p>
                  <p>职称：{{ doctor.title }}</p>
                </div>
                <div class="section-middle">
                  <p>回答次数：{{ doctor.response_count }}</p>
                  <p>评分：{{ doctor.score }}</p>
                </div>
                <div class="section-right">
                  <p>价格：{{ doctor.price }}</p>
                  <el-button type="primary" @click="showDetail(doctor)">问医生</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="item.hospital" :name="item.hospital">
        <!-- 展示医院数据 -->
        <div v-for="(hospital, index) in hospital" :key="'hospital-' + index" class="hospital-card">
          <div class="hospital-content">
            <div class="hospital-header">
              <h4>{{ hospital.name }}</h4>
            </div>
            <div class="hospital-info">
              <p>地址：{{ hospital.address }}</p>

            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="item.medicine" :name="item.medicine">
        <!-- 展示药品数据 -->
        <div v-for="(medicine, index) in medicine" :key="'medicine-' + index" class="medicine-card">
          <div class="medicine-content">
            <div class="medicine-header">
              <h4>{{ medicine.name }}</h4>
            </div>
            <div class="medicine-info">
              <p>生产厂家：{{ medicine.manufacturer }}</p>
              <p>通用名：{{ medicine.generic_name }}</p>
              <p>规格：{{ medicine.dosage }}</p>
              <p>价格：{{ medicine.price }}</p>
              <p>简介：{{ medicine.description }}</p>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import SearchBox from '../components/SearchBox.vue'
import { onMounted, ref } from "vue";
import axios from "axios";

const list = ref([]);
const ps = `http://localhost:8000/app/`;
const tui = ref([]);
const tui1 = ref([]);
const tui2 = ref([]);
const doctor = ref([]);
const hospital = ref([]);
const medicine = ref([]);

// 默认设置 activeName 为推荐页的名称
const activeName = ref('');

const handleClick = (tab, event) => {
  axios.post(ps + `doctor_hospital_department_medicine/`, { name: tab.props.name })
      .then(res => {
        console.log(res.data)
        tui.value = res.data.doctor;
        tui1.value = res.data.hospital;
        tui2.value = res.data.medicine;
        doctor.value = res.data.doctor;
        hospital.value = res.data.hospital;
        medicine.value = res.data.medicine;
      })
}

const showDetail = (item) => {
  console.log(item);
}

onMounted(() => {
  axios.get(ps + `doctor_hospital_department_medicine`)
      .then(response => {
        list.value = response.data;
        // 设置默认推荐页
        if (list.value.length > 0) {
          activeName.value = list.value[0].recommend;
          // 获取推荐页的数据
          handleClick({ props: { name: activeName.value } }, null);
        }
      });
});
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* 卡片样式 */
.doctor-card, .hospital-card, .medicine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.doctor-card:hover, .hospital-card:hover, .medicine-card:hover {
  transform: translateY(-5px);
}

/* 内容样式 */
.doctor-content, .hospital-content, .medicine-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* 头部样式 */
.doctor-header, .hospital-header, .medicine-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.doctor-image-container {
  margin-bottom: 10px;
}

.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doctor-name-hospital, .hospital-header h4, .medicine-header h4 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
  color: #333;
}

/* 信息样式 */
.doctor-info, .hospital-info, .medicine-info {
  flex: 1;
  margin-top: 10px;
  line-height: 1.6;
  text-align: left;
}

.info-sections {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.section-left, .section-middle, .section-right {
  flex: 1;
  margin-right: 10px;
  text-align: center;
}

.section-right {
  margin-right: 15px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.hospital-info, .medicine-info {
  margin-top: 10px;
}

/* 按钮样式 */
.el-button {
  margin-top: 10px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .doctor-content, .hospital-content, .medicine-content {
    flex-direction: column;
    align-items: center;
  }

  .info-sections {
    flex-direction: column;
  }

  .section-left, .section-middle, .section-right {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
